<template>
<div>
  <span style="float: right">欢迎您，{{userName}}&nbsp;&nbsp;&nbsp;<a href="#" @click.prevent="getOut">退出登录</a></span>
  <el-descriptions class="margin-top" title="配送员信息" :column="3"  border>

    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-user" ></i>
        用户名
      </template>

      <el-tag size="small">{{ courier.name}}</el-tag>
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-mobile-phone"></i>
        手机号
      </template>
      <span > {{ courier.phone}}</span>
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
        性别
      </template>
      {{courier.gender}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-tickets"></i>
        年龄
      </template>
      <span>{{ courier.age}}</span>

    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        所属区域
      </template>
      <span >{{courier.district.province+","+courier.district.city+","+courier.district.district}}</span>
    </el-descriptions-item>

  </el-descriptions>
  <br>
  <hr>

  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户订单" name="first">

      <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"

      >
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            fixed
            prop="id"
            label="订单编号"
            width="100">
        </el-table-column>
        <el-table-column
            prop="orderTime"
            label="下单时间"
            width="100">
        </el-table-column>
        <el-table-column
            prop="shippingAddress"
            label="配送详细地址"
            width="150">
        </el-table-column>
        <el-table-column
            prop="distributionArea"
            label="配送区域"
            width="160">
        </el-table-column>
        <el-table-column
            prop="goodsName"
            label="配送商品"
            width="150">
        </el-table-column>
        <el-table-column
            prop="goodsNum"
            label="商品数量"
            width="150">
        </el-table-column>
        <el-table-column
            prop="totalPrice"
            label="商品价格"
            width="150">
        </el-table-column>
        <el-table-column
            prop="totalPrice"
            label="商品价格"
            width="150">
        </el-table-column>
        <el-table-column
            prop="remark"
            label="配送备注"
            width="100">
        </el-table-column>
        <el-table-column
            prop="customer.id"
            label="客户ID"
            width="100">
        </el-table-column>
        <el-table-column
            prop="customer.name"
            label="客户姓名"
            width="100">
        </el-table-column>
        <el-table-column
            prop="customer.phone"
            label="客户电话"
            width="100">
        </el-table-column>
        <el-table-column
            prop="state"
            label="订单状态"
            width="100">
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                style="background-color: aqua"
                @click="handleEdit(scope.row)" >抢单</el-button>
            <!--        <el-button-->
            <!--            size="mini"-->
            <!--            type="danger"-->
            <!--            @click="handleDelete(scope.row)" >删除</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="curPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-tab-pane>
    <el-tab-pane label="拥有订单" name="second">

      <el-table
          ref="multipleTable"
          :data="tableData2"
          tooltip-effect="dark"
          style="width: 100%"
      >
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            fixed
            prop="id"
            label="订单编号"
            width="100">
        </el-table-column>
        <el-table-column
            prop="orderTime"
            label="下单时间"
            width="100">
        </el-table-column>
        <el-table-column
            prop="shippingAddress"
            label="配送详细地址"
            width="150">
        </el-table-column>
        <el-table-column
            prop="distributionArea"
            label="配送区域"
            width="160">
        </el-table-column>
        <el-table-column
            prop="goodsName"
            label="配送商品"
            width="150">
        </el-table-column>
        <el-table-column
            prop="goodsNum"
            label="商品数量"
            width="150">
        </el-table-column>
        <el-table-column
            prop="totalPrice"
            label="商品价格"
            width="150">
        </el-table-column>
        <el-table-column
            prop="shopName"
            label="店铺名称"
            width="150">
        </el-table-column>
        <el-table-column
            prop="remark"
            label="配送备注"
            width="100">
        </el-table-column>
        <el-table-column
            prop="customer.id"
            label="客户ID"
            width="100">
        </el-table-column>
        <el-table-column
            prop="customer.name"
            label="客户姓名"
            width="100">
        </el-table-column>
        <el-table-column
            prop="customer.phone"
            label="客户电话"
            width="100">
        </el-table-column>
        <el-table-column
            prop="state"
            label="订单状态"
            width="100">
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                style="background-color: aquamarine"
                @click="handleEdit2(scope.row)" >完工</el-button>
            <!--        <el-button-->
            <!--            size="mini"-->
            <!--            type="danger"-->
            <!--            @click="handleDelete(scope.row)" >删除</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange2"
          @current-change="handleCurrentChange2"
          :current-page="curPage2"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize2"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total2">
      </el-pagination>
    </el-tab-pane>

  </el-tabs>

</div>
</template>

<script>
export default {
  name: "delivery.vue",
  data() {
    return {
      userName:'',
      activeName: 'first',
      tableData:[],
      tableData2:[],
      courier:{},
      curPage:1,
      pageSize:5,
      total:0,
      curPage2:1,
      pageSize2:5,
      total2:0,
    }
    },
  created() {
    this.queryByPage()
  },
  methods: {
    //更换每页最大记录数
    handleSizeChange(val) {
      this.pageSize=val
      this.queryByPage()
    },
    //切换当前页
    handleCurrentChange(val) {
      this.curPage=val
      this.queryByPage()
    },
    //更换每页最大记录数
    handleSizeChange2(val) {
      this.pageSize2=val
      this.queryByPage2()
    },
    //切换当前页
    handleCurrentChange2(val) {
      this.curPage2=val
      this.queryByPage2()
    },
    handleClick(tab, event) {
      this.queryByPage()
      this.queryByPage2()
    },
    async queryByPage() {
      this.courier = JSON.parse(sessionStorage.getItem('user'));
      this.userName=this.courier.name
      let res = await this.$axios.get('/pendingOrders/queryByCourierPage', {
        params: {
          province: this.courier.district.province,
          city: this.courier.district.city,
          district: this.courier.district.district,
          curPage: this.curPage,
          pageSize: this.pageSize
        }
      })
      this.tableData = res.data.data
      this.total = res.data.total
    },
    async queryByPage2() {
      this.courier = JSON.parse(sessionStorage.getItem('user'));
      let res = await this.$axios.get('/pendingOrders/queryByCourierPendingOrders', {
        params: {
          courierId: this.courier.id,
          curPage: this.curPage2,
          pageSize: this.pageSize2
        }
      })
      this.tableData2 = res.data.data

    },
    async handleEdit(row) {

      let res = await this.$axios.get('/courier/savePendingOrders', {
        params: {
          courierId: this.courier.id,
          pendingOrdersId: row.id
        }
      })
      let resp = await this.$axios.get('/pendingOrders/modifyState', {
        params: {
          id: row.id,
          state: "已接单"
        }

      })
      if (resp.data.code === 200) {
        this.curPage = 1
        this.queryByPage()
        this.$message({
          type: 'success',
          message: '抢单成功!'
        });
      } else {
        this.$message({
          type: 'error',
          message: '抢单失败'
        });
      }
    },
    async handleEdit2(row) {
      console.log(row)
      let resp = await this.$axios.get('/historicalOrders/goToHistory', {
        params: {
          no: row.id,
          orderTime: row.orderTime,
          customPhone: row.customer.phone,
          shippingAddress: row.shippingAddress,
          shopName: row.shopName,
          goodsName: row.goodsName,
          goodsNum: row.goodsNum,
          goodsAmount: row.totalPrice,
          customName:row.customer.name,
          courier: this.courier.name,
          remark: row.remark
        }
      })

      if (resp.data.code === 200) {
        this.curPage = 1
        this.queryByPage2()
        this.$message({
          type: 'success',
          message: '成功!'
        });
      } else {
        this.$message({
          type: 'error',
          message: '失败'
        });
      }
    },
    getOut(){
      sessionStorage.clear()
      this.$router.push('/login')
    }
  }

}
</script>

<style scoped>

</style>